<template>
  <div class="more-container">
    <div class="innercoach">
      <el-row class="topsearch">
        <el-col :span="4">
          <el-input v-model="searchword" clearable placeholder="请输入关键字"></el-input>
        </el-col>
      </el-row>
      <!-- 顶部搜索框 -->
      <commonline :newText="'员工'" @addList="additem" @refreshData='refreshData' @searchlist="searchlist" @resetform="resetform"
        :isshowAdd="checkPermission(['accountCreate'])"></commonline>
      <!-- 弹窗 -->
      <roleDialog @confirm="confirm" :isshowDialog="isshowCoachDialog" :formType="formtype" :dialogTitle="dialogtitle"
        @closedialog="closedialog"></roleDialog>

      <!-- 列表 -->
      <roleTable @deleteitem="deleteitem" @changepageTotal="changepageTotal" @changepage="changepage" @openedit="openedit"
        :tabData="tabList"></roleTable>
    </div>
  </div>
</template>

<script>
  // 引入按钮区域
  import commonline from '@/components/commonline/commonline'
  // 添加弹窗
  import roleDialog from './component/roleDialog'
  //引入table
  import roleTable from './component/roleTable'

  //api
  import {
    accountList,
    accountDelete,

  } from '@/api/rule'
  //按钮权限验证
  import checkPermission from '@/utils/permission'
  export default {
    data() {
      return {
        dialogtitle: '新增员工',
        //搜索关键字
        searchword: '',
        //是否显示教练弹窗
        isshowCoachDialog: false,
        //页码
        page: 1,
        //翻页总数
        pageTotal: 10,
        //新增还是编辑
        formtype: 0,
        //表格数据
        tabList: {},
 roleOptions:[]
      }
    },
    // 注册组件
    components: {
      commonline,
      roleDialog,
      roleTable,

    },
    methods: {
      //按钮权限验证
      checkPermission,
      refreshData(val) {
        console.log('1111111111111111111')
        this.getaccountList(this.page, this.pageTotal)
      },
      //总数翻页
      changepageTotal(val) {
        this.pageTotal = val
        this.getaccountList(this.page, this.pageTotal)
      },
      //翻页
      changepage(val) {
        this.page = val
        this.getaccountList(this.page, this.pageTotal)
      },
      //删除
      async deleteitem(id) {
        let params = {
          id,
        }
        //询问客户是否删除
        this.$confirm('您确认要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            let data = await accountDelete(params)
            if (data.code == '0000') {
              this.$message({
                type: 'success',
                message: '删除成功!',
              })
            }
            //刷新列表
            this.getaccountList(this.page, this.pageTotal)
          })
          .catch(() => {})
      },
      confirm() {
        this.isshowCoachDialog = false
        //刷新列表
        this.getaccountList(this.page, this.pageTotal)
      },

      //获取列表数据
      async getaccountList(page = 1, rows = 10) {
        let params = {
          page,
          rows,
        }
        //如果有搜索关键字追加搜索
        if (this.searchword) {
          params.keyword = this.searchword
        }

        let data = await accountList(params)
        this.tabList = data.data
      },
      //编辑打开
      openedit(val) {
        this.$bus.emit('editcoach', val)
        this.dialogtitle = '编辑员工'
        this.formtype = val.type
        this.isshowCoachDialog = true
      },
      //新增弹窗
      additem() {
        this.dialogtitle = '新增员工'
        this.isshowCoachDialog = true
          this.$bus.emit('newcoach')
      },
      //关闭弹窗
      closedialog() {
        this.formtype = 0
        this.isshowCoachDialog = false
      },
      //查询搜索
      searchlist() {
        this.$message({
          type: 'success',
          message: '查询成功!'
        });
        this.getaccountList(this.page, this.pageTotal)
      },
      //重置
      resetform() {
        this.searchword = ''
        this.$message({
          type: 'success',
          message: '已重置!',
        })
        this.getaccountList(this.page, this.pageTotal)
      },
    },
    mounted() {
      //获取列表数据
      this.getaccountList(this.page, this.pageTotal)

    },
  }
</script>

<style scoped lang='scss'>
  .more-container {
    padding-top: 1px !important;

    .topsearch {
      margin-top: 20px;
    }
  }
</style>
